@charset "utf-8";
body{background:url(../images/bg.jpg) no-repeat #121747 fixed;background-size:100% 100%;color:#26ccd4;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);}
a{color:#26ccd4;}
a:hover{color:#15f0fa;}

/*头部*/
header{position:fixed;left:230px;top:0;z-index:80;width:calc(100% - 230px);height:5.5vh;border-bottom:1px solid #15cddd;text-align:center;
    background:red; /* 一些不支持背景渐变的浏览器 */
    background:-moz-linear-gradient(top, #111f53, rgba(5, 84, 156, 1));
    background:-webkit-gradient(linear, 0 0, 0 bottom, from(#111f53), to(rgba(5, 84, 156, 1)));
    background:-o-linear-gradient(top, #111f53, rgba(5, 84, 156, 1));
}
.header_txt{
    font-size: 20px;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%); /* 垂直和水平居中 */
}

/*左侧*/
.sidebar{position:fixed;width:230px;height:100%;background:url(../images/sidebar_bg.png) no-repeat center bottom #0f2153;font-size:12px;background-size:180px auto;z-index:100;}

.people{margin:40px 0 0 40px;width:140px;}
.people p{width:140px;height:160px;background:url(../images/people_bg.jpg) no-repeat;}
.people p img{margin:20px 0 0 20px;width:100px;height:120px;}
.people b{margin-top:10px;display:block;}

.menu{margin-top:20px;}
.menu li a{position:relative;float:left;padding:1px;margin:4px 40px;width:138px;height:28px;}
.menu li a.cur{background:#15f0fa;}
.menu li a b{position:absolute;left:1;top:1;float:left;z-index:123;width:136px;height:26px;line-height:26px;text-align:center;border:1px solid #115f85;background:#0f2053;}
.menu li a.cur b{background:#104a74;color:#15f0fa;}
.menu li a em{position:absolute;left:0;top:8px;z-index:121;width:100%;height:14px;background:#0f2053;}
.menu li a i{position:absolute;left:20px;top:0;z-index:122;width:100px;height:100%;background:#0f2053;}

.sidebar_line_top{position:absolute;right:0;top:-3px;transform:scale(1,-1);}
.sidebar_line_foot{position:absolute;right:0;bottom:-3px;}
.sidebar_line_right{position:absolute;right:0;top:0;width:11px;height:100%;background:url(../images/img02.jpg) no-repeat left center #15f0fa;}

/*表格*/
.tab{width:100%;border:1px solid #15f0fa;text-align:center;font-size:12px;border-radius:6px;}
.tab td{padding:10px;border-left:0px solid #15f0fa;border-top:1px solid #15f0fa;min-height:12px;line-height:12px;}
.tab tr td:first-child{border-left:none;}
.tab tr:first-child td{border-top:none;}

/*主要内容*/
.mainbady{margin:0px 0 0 230px;width:calc(100% - 230px);height: 100%}

.container {
    height: calc(100% - 5.5vh);
    width: 100%;
    margin-top: 5.5vh;
}

#chat-container {
    display: flex;
    flex-direction: column;//子元素将垂直排列
    height: 100%;
    width: 100%;
}

#responses {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    margin-bottom: 10px;
}

#input-area {
    display: flex;
    padding: 10px;
    background: #333;
    position: fixed;
    bottom: 0;
    width: calc(100% - 250px);
}

input[type="text"] {
    width: calc(100% - 12vh);
    flex: 1;
    padding: 10px;
    font-size: 16px;
    border: 2px solid #555;
    background: #222;
    color: white;
    border-radius: 5px;
    margin-right: 10px;
}

.send_btn {
    width: 12vh;
    padding: 10px 20px;
    font-size: 16px;
    background-color: #0066cc;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.response {
    background: rgba(0, 0, 0, 0.5);
    padding: 10px;
    margin-top: 10px;
    border-radius: 5px;
    width: fit-content;
    max-width: 80%;
    font-size: 15px;
}

.user-message {
    align-self: flex-end; /* 确保消息在右侧显示 */
    background: rgb(149, 236, 105); /* 蓝色背景 */
    padding: 10px;
    margin-top: 10px;
    border-radius: 5px;
    width: fit-content;
    max-width: 80%;
    color: black;
}

.bot-message {
    align-self: flex-start;
    background: rgb(255,255,255);
    display: flex;
    align-items: center;
    max-width: 60vw;
    color: black;
}

.speak-button {
    margin-left: 10px;
    font-size: 16px;
    cursor: pointer;
    background: none;
    border: none;
    color: white;
    width: 5vh;
    height: 5vh;
}

/*装饰*/
.decorate_left_top{position:absolute;left:-60px;top:-50px;}
.decorate_left_top img{width:120px;}
.decorate_left_top_two{position:absolute;left:60px;top:-13px;}
.decorate_left_top_two img{width:160px;}
.decorate_left_foot{position:absolute;left:0;bottom:-9px;}
.decorate_right_top{position:absolute;right:0;top:-9px;
    transform:rotate(180deg);
    -ms-transform:rotate(180deg); 	/* IE 9 */
    -moz-transform:rotate(180deg); 	/* Firefox */
    -webkit-transform:rotate(180deg); /* Safari 和 Chrome */
    -o-transform:rotate(180deg); 	/* Opera */
}


/*-----动画效果-左侧导航鼠标经过背景显示效果-----*/
.menu li a b::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #104a74;
    z-index: -1;
    opacity: 0;
    -webkit-transform: scale3d(0.3, 1, 1);
    transform: scale3d(0.3, 1, 1);
    -webkit-transition: -webkit-transform 0.8s, opacity 0.8s;
    transition: transform 0.8s, opacity 0.8s;
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.menu li a b:hover::before {
    opacity:1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}


